<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import chinaJson from '../china.json'
const map = ref()
onMounted(() => {
  let mycharts = echarts.init(map.value)
  echarts.registerMap('china', chinaJson as any)
  mycharts.setOption({
    geo: {
      top: '20%',
      map: 'china',
      zoom: 1.2,
      label: {
        normal: {
          show: true,
          color: 'white',
          fontSize: 12,
        },
        emphasis: {
          show: true,
          color: 'white',
          fontSize: 30,
        },
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: 'rgba(22, 93, 255, 0.2)',
          borderColor: '#165DFF',
          borderWidth: 1,
        },
        emphasis: {
          areaColor: '#9b05ff',
        },
      },
    },
    series: [
      {
        symbol: 'circle',
        type: 'lines',
        show: true,
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
            ],
            lineStyle: {
              color: '#00ffff',
              width: 3,
              curveness: 0.1,
            },
          },
          {
            coords: [
              [111.670801, 40.818311], // 起点
              [104.065735, 30.659462], // 终点
            ],
            lineStyle: {
              color: '#00ffff',
              width: 5,
              curveness: 0.1,
            },
          },
          {
            coords: [
              [106.713478, 26.578343], // 起点
              [91.132212, 29.660361], // 终点
            ],
            lineStyle: {
              color: '#00ffff',
              width: 5,
              curveness: 0.1,
            },
          },
          {
            coords: [
              [108.948024, 34.263161], // 起点
              [118.767413, 32.041544], // 终点
            ],
            lineStyle: {
              color: '#00ffff',
              width: 5,
              curveness: 0.1,
            },
          },
          {
            coords: [
              [103.823557, 36.058039], // 起点
              [115.892151, 28.676493], // 终点
            ],
            lineStyle: {
              color: '#00ffff',
              width: 5,
              curveness: 0.1,
            },
          },
        ],
        effect: {
          show: true,
          symbol: 'arrow',
          color: 'rgb(0,255,157)',
          symbolSize: 20,
        },
      },
    ],
  })
})
</script>

<template>
  <div class="box4" ref="map">我是地图组件</div>
</template>

<style scoped lang="scss"></style>
